"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'


import {commonProps, commonStyles} from "../../assets/styles/common";
import MyText from "../../component/MyText";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import Line from "../../component/Line";
import {postingsInputProps} from "../../assets/styles/community";
import {SupportReportPage} from "../../interface/router";
import {toastValidateError} from "../../utils/tools";
import T from "../../utils/T";

const {View, Keyboard, TouchableOpacity, Animated, TextInput} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");

const {Modal} = require('antd-mobile');
const prompt = Modal.prompt;

class Page extends React.Component<SupportReportPage, any> {
    static defaultProps = {
        supportItem: {name: ''}
    };
    keyboardDidShowListener: any;
    keyboardDidHideListener: any;
    _input: any;

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            bottom: new Animated.Value(0),
        };
    }

    textInputProps = {
        ref: (input) => {
            this._input = input
        },
        placeholder: '请描述您遇到的问题......'
    };

    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardWillShow = (props) => {
        const {height} = props.endCoordinates;
        Animated.timing(
            this.state.bottom,
            {
                toValue: height,
                duration: 240,
            }
        ).start();
    };
    _keyboardWillHide = (props) => {
        Animated.timing(
            this.state.bottom,
            {
                toValue: 0,
                duration: 200,
            }
        ).start();
    };


    /**
     * 提交问题
     * @param workNumber
     */
    doReport = (workNumber) => {
        if (workNumber) {
            let payload = {};
            payload['content'] = this._input._lastNativeText;
            payload['email'] = this.props.auth.userInfo.email;
            payload['userName'] = this.props.auth.userInfo.nickName;
            payload['workNumber'] = workNumber;
            payload['area'] = {id: this.props.auth.selectArea.id};
            payload['questionType'] = {id: this.props.supportItem.id};
            this.props.dispatch({type: 'place/reportQuestion', payload})
        } else {
            toastValidateError(null, '请描输入您的办公室号');
        }
    };
    onSubmit = () => {
        Keyboard.dismiss();

        if (!this._input._lastNativeText || typeof this._input._lastNativeText === 'undefined') {
            toastValidateError(null, '请描述您遇到的问题');
            return;
        }
        let payload = {};
        payload['content'] = this._input._lastNativeText;
        payload['email'] = this.props.auth.userInfo.email;
        payload['userName'] = this.props.auth.userInfo.nickName;
        // payload['workNumber'] = workNumber;
        payload['area'] = {id: this.props.auth.selectArea.id};
        payload['questionType'] = {id: this.props.supportItem.id};
        // this.props.dispatch({type: 'place/reportQuestion', payload})
        Actions.confirmReport({payload});


        // prompt(
        //     '确认您的位置',
        //     '请输入办公室编号',
        //     [
        //         {text: T('cancel')},
        //         {
        //             text: T('submit'),
        //             onPress: this.doReport
        //         },
        //     ],
        //     'default',
        //     null,
        //     ['请输入办公室编号']
        // );
    };

    render() {
        return (
            <View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: this.props.supportItem.name, tintColor: '#fff'}}
                />
                <View style={[commonStyles.flex1, commonStyles.relative, {padding: 10}]}>
                    <TextInput {...postingsInputProps} {...this.textInputProps} autoFocus={false}/>
                </View>
                <Animated.View style={[commonStyles.absolute, {bottom: this.state.bottom}]}>
                    <Line/>
                    <View style={[commonStyles.centerVH, {padding: 10}]}>
                        <MyText>我们稍后会尽快通过电子邮箱联系您。</MyText>
                    </View>
                    <View style={[{paddingLeft: 8, paddingRight: 8, paddingBottom: 8}]}>
                        <TouchableOpacity onPress={this.onSubmit}>
                            <View
                                style={[commonStyles.centerVH, {backgroundColor: Colors.Active, paddingVertical: 15}]}>
                                <MyText color={Colors.White}>{T('submit my request')}</MyText>
                            </View>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
            </View>
        );
    }
}

export default connect(
    ({auth, place}) => ({auth, place})
)(Page);